<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>用户列表</title>

    <link rel="stylesheet" type="text/css" th:href="@{/pubilc/plugin/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/pubilc/plugin/css/admin.css}"/>
</head>

<body>
<div class="page-content-wrap">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <input type="text" name="nickname" required placeholder="昵称" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户类型</label>
                <div class="layui-input-block">
                    <select name="userType" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">普通</option>
                        <option value="1">老师</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" lay-filter="search" lay-submit>搜索</button>
        </div>
    </form>
    <div class="layui-form" id="table-list">

        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>
<script th:src="@{/pubilc/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/pubilc/plugin/js/common.js}" type="text/javascript" charset="utf-8"></script>

<script type="text/html" id="barTool" lay-filter="barTool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<style type="text/css">
    .layui-table-cell {
        height: auto;
        line-height: 28px;
    }
</style>
<script>
    layui.use(['jquery', 'table', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var tableIns = table.render({
            elem: '#table'
            , url: parent.basePath + '/play/page/getUserList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 15
            , cols: [[
                {field: 'userId', width: 80, title: '用户ID'}
                , {field: 'openId', width: 250, title: 'openId'}
                , {field: 'nickname', width: 120, title: '用户名', edit: 'text'}
                , {
                    field: 'headUrl', width: 150, title: '头像', templet: function (d) {
                        return "<div><img src='" + d.headUrl + "'></div>"
                    }
                }
                , {
                    field: 'sex', width: 80, title: '性别', templet: function (d) {
                        if (d.sex == 1) {
                            return '男';
                        }
                        if (d.sex == 2) {
                            return '女';
                        }
                        return d.sex;
                    }
                }
                , {field: 'province', width: 80, title: '省份'}
                , {field: 'city', width: 80, title: '城市'}
                , {field: 'country', width: 80, title: '国家'}
                , {field: 'feature', title: 'feature', edit: 'text'}
                , {field: 'intro', title: '信息'}
                , {field: 'tel', title: '电话', edit: 'text'}
                , {
                    field: 'userType', title: '用户类型', edit: 'text', templet: function (d) {
                        if (d.userType == 0) {
                            return '普通';
                        }
                        if (d.userType == 1) {
                            return '老师';
                        }
                        return d.userType;
                    }
                }
                , {
                    field: 'subscribe', title: '是否关注', templet: function (d) {
                        if (d.subscribe == 0) {
                            return '取消关注';
                        }
                        if (d.subscribe == 1) {
                            return '关注';
                        }
                        return d.subscribe;
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barTool', width: 150}

            ]]
            , response: {
                countName: 'total' //规定数据总数的字段名称，默认：count
                , dataName: 'list' //规定数据列表的字段名称，默认：data
            }
        });

        //查询
        form.on('submit(search)', function (data) {
            tableIns.reload({where: data.field});
            return false
        });

        table.on('edit(table)', function (obj) {
            $.post(parent.basePath + "/play/page/updateUser", obj.data, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 2000});
                } else {
                    layer.msg(res.msg, {time: 2000});
                    tableIns.reload({where: data.field});
                }
            }, 'json');
        });

        //工具栏事件
        table.on('tool(table)', function (obj) {
            switch (obj.event) {
                case 'del':
                    //询问框
                    layer.confirm('您确定要删除吗？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        layer.msg('确定', {icon: 1});
                        layer.msg("暂不允许删除用户信息");
                    }, function () {
                        return;
                    });

                    break;
            }
        });


    });
</script>
</body>

</html>